<!--  -->
<template>
  <div class="door">
    <img class="logo" alt="Vue logo" src="../../assets/logo.png" />
    <el-button class="btn" type="primary" @click="comeIn">{{doorName}}</el-button>
  </div>
</template>

<script lang='ts'>
import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
interface DataProps {}
export default {
  name: "Door",
  setup() {
    const router = useRouter();
    let doorName = ref("进入会场");
    function comeIn() {
      router.push({
        path: "/room"
      });
    }
    return { doorName, comeIn };
  }
};
</script>
<style lang="scss" scoped>
.door {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .logo {
    width: 50%;
  }
  .btn {
    margin-bottom: 10%;
  }
}
</style>